﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../themes/icon.css" rel="stylesheet" />
    <script src="../jquery-easyui-1.4.3/jquery.min.js"></script>
    <script src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <meta charset="utf-8" />
</head>
<body>
    <form id="ff" method="post">
        <div>
            <label for="name">姓名:</label>
            <input class="easyui-textbox" type="text" name="name" data-options="required:true" />
        </div>
        <div>
            <label for="email">邮箱:</label>
            <input class="easyui-textbox" type="text" name="email" data-options="validType:'email'" />
        </div>
        <div>
            <label for="tel">验证框：</label>
            <input class="easyui-validatebox" type="text" name="tel" data-options="validType:'tel'" />
        </div>
        <div>
            <label for="class">自定义下拉框：</label>
            <input id="cc" value="一年级">
        </div>
        <div>
            <label for="class">下拉列表框：</label>
            <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
                <option value="aa">请选择</option>
                <option>一班</option>
                <option>二班</option>
                <option>三班</option>
                <option>四班</option>
            </select>
        </div>
        <div>
            <label for="class">树形下拉框：</label>
            <select id="cc" class="easyui-combotree" style="width:200px;"
                    data-options="url:'get_data.php',required:true"></select>
        </div>
        <div>
            <label>数据表格下拉框</label>
            <select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
                    data-options=" panelWidth:450, value:'006', idField:'code', textField:'name', url:'datagrid_data.json',
            columns:[[
                {field:'code',title:'Code',width:60},
                {field:'name',title:'Name',width:100},
                {field:'addr',title:'Address',width:120},
                {field:'col4',title:'Col41',width:100}
            ]]
        "></select>
        </div>
        <div>
            <label>数值输入框</label>
            <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"/>
        </div>
        <div>
            <label>日期输入框</label>
            <input id="dd" type="text" class="easyui-datebox" required="required"/>
        </div>
        <div>
            <label>日期时间输入框</label>
            <input class="easyui-datetimebox" name="birthday"
                   data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">
        </div>
        <div>
            <label>日历</label>
            <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
        </div>
        <div>
            <label>数字微调</label>
            <input id="ss" required="required" style="width:80px;">
        </div>
        <div>
            <label>时间微调</label>
            <input id="time" style="width:80px;">
        </div>
        <div>
            <label>滑动条</label>
            <input class="easyui-slider" value="12" style="width:300px"
                   data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />
            <div id="roll" style="height:200px"></div>
        </div>
    </form>
</body>
</html>
<script>
    $('#cc').combo({
        required: true,
        multiple: true
    });

    $('#aa').combotree({
        url: 'get_data.php',
        required: true
    });

    $('#ss').numberspinner({
        min: 10,
        max: 100,
        editable: false
    });

    $('#time').timespinner({
        min: '08:30',
        required: true,
        showSeconds: true
    });

    $('#roll').slider({
        mode: 'v',
        tipFormatter: function (value) {
            return value + '%';
        }
    });
</script>